<template>
  <div>
    <form @submit.prevent="submitForm">
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="formData.name" />

      <label for="email">Email:</label>
      <input type="email" id="email" v-model="formData.email" />

      <button type="submit">Submit</button>
    </form>

    <div>
      <h3>Response:</h3>
      <textarea v-model="responseText" rows="5" cols="30" readonly></textarea>
    </div>

    <div>
      <h3>Rendered Markdown:</h3>
      <textarea v-model="markdown"></textarea>
      <div v-html="renderedMarkdownA"></div>
    </div>

    <MdPreview :modelValue="markdown" />

  </div>
</template>


<script setup>
import { onMounted, ref, computed, getCurrentInstance } from 'vue'
import axios from 'axios';
import { marked } from 'marked';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';


defineProps({
  msg: String
})


const formData = ref({
  name: '',
  email: ''
});

const markdown = ref('');

const responseText = ref('');

const submitForm = async () => {
  const form = new FormData();
  form.append('name', formData.value.name);
  form.append('email', formData.value.email);

  try {
    const response = await axios.post('https://mock.apipost.net/mock/35fac2f18c03000/sqx_fast/app/user-session/search/c9a719b7a8c4451aaca8e9830d4b8802?apipost_id=1face39b78100b', form, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    // 将返回结果存入文本框中
    // responseText.value = JSON.stringify(response.data.message, null, 2);
    responseText.value = response.data.message
  } catch (error) {
    console.error('Error:', error);
    responseText.value = 'An error occurred: ' + error.message;
  }
};

// 计算属性：将 responseText 渲染为 Markdown
const renderedMarkdown = computed(
    () => {
      // return marked(responseText.value);
      return marked(responseText.value);
    }
);

const renderedMarkdownA = computed(
    () => {
      return marked(markdown.value);
    }
);


</script>

<style scoped>
/* a {
  color: #42b983;
} */


</style>